<template>
	<view class="messages-page">
		<view class="message-title">
			<view class="font-size-20">消息</view>
			<image class="img-shuazi" src="/static/images/patient/shuazi.png" @click="handleAllRead"></image>
		</view>
		<!-- 消息类型Tab -->
		<view class="msg-tabs">
			<view class="msg-tab">
				<view class="tab-icon consult"></view>
				<view class="tab-title consult">问诊消息</view>
			</view>
			<view class="msg-tab" @click="handleTabChange">
				<view class="tab-icon notice"></view>
				<view class="tab-title notice">通知消息</view>
				<view class="tab-no" v-if="notReadCount!=0">{{notReadCount>10?'10+':notReadCount}}</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="pad-16r">
			<msg-card v-for="(item, index) in messageList" :key="index" :item="item" @item-click="handleItemClick"/>
		</view>
		<view class="pad-16r" v-if="noEvaluate" @click="toPage">
			<view class="fraction">
				<text class="yaoqing">邀请</text>邀请您在线对该医生进行评分评价
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import MsgCard from './components/msgCard.vue';
	import {
		addBatch,
		selectNotReadPat
	} from '../../api/messageRead';
	import {
		doctorEvaluatePatient
	} from '../../api/doctorEvaluate';
	export default {
		name: "MessagesPage",
		components: {
			MsgCard
		},
		computed: {
			...mapGetters(['hostApi', "userInfo"])
		},
		mounted() {
			if (this.userInfo) {
				this.init()
				this.initDoctorEvaluate()
			}
		},
		data() {
			return {
				dataSource: [],
				notReadCount: 0,
				messageList: [{
						avatar: 'doctor',
						name: '肖明明',
						tag: '首次咨询-图文',
						message: '发起问诊',
						time: '2025-09-09 10:20:00',
						status: 'pending',
						unread: false,
						id: 'msg-1',
					},
					{
						avatar: 'doctor',
						name: '肖明明',
						tag: '在线复诊-图文',
						message: '好的，谢谢',
						time: '2025-09-09 10:20:00',
						status: 'active',
						unread: true,
						id: 'msg-2'
					},
					{
						avatar: 'doctor',
						name: '肖明明',
						tag: '首次咨询-图文',
						message: '医生问诊已结束',
						time: '2025-09-09 10:20:00',
						status: 'ended',
						unread: false,
						id: 'msg-3',
					}
				],
				noEvaluate: false,
			};
		},
		methods: {
			init() {

				// 消息类型 1指定患者可以看到 2指定医生可以看到 3指定科室医护人员可以看到 4指定院区所有人可以看到 
				selectNotReadPat({
					patId: this.userInfo.patId,
					types: [1, 4],
				}).then(res => {
					this.notReadCount = res.count
					this.dataSource = res.data;
				})
			},
			// 查看当前患者是否有评价还未评价
			initDoctorEvaluate() {

				doctorEvaluatePatient({
					patId: this.userInfo.patId,
					status: 1,
				}).then(res => {
					console.log(res)
					for (var i = 0; i < res.length; i++) {
						if (!res[i].fraction) {
							this.noEvaluate = true
							break
						}
					}
				})
			},
			handleTabChange(tab) {
				if (!this.userInfo) {
					this.$u.toast('请选择就诊卡')
					return
				}
				uni.navigateTo({
					url: '/pages/Messages/notice'
				});
			},
			// 设置全部已读
			handleAllRead() {
				if (!this.userInfo) {
					return
				}
				let list = [];
				this.dataSource.forEach(item => {
					list.push({
						messageId: item.id,
						patId: this.userInfo.patId,
						id: item.readId
					});
				})
				addBatch({
					list: list
				}).then(res => {
					this.init()
				})
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/Introduce/MedicalEvaluation'
				})
			},
			handleItemClick(item) {
				// 跳转到chat页面，并传递status和id
				uni.navigateTo({
					url: `/pages/Messages/chat?status=${item.status}&id=${item.id}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.message-title {
		display: flex;
		justify-content: center;
		padding: 15px 0;
		align-items: center;
	}

	.messages-page {
		// display: flex;
		// flex-direction: column;
		height: calc(100vh - 150px);
		background: linear-gradient(180deg, #eafafd 0%, #fff 30%);
		// padding-bottom: 32rpx;
	}

	.msg-tabs {
		display: flex;
		justify-content: space-between;
		padding: 16rpx;
	}

	.msg-tab {
		width: 49%;
		height: 195rpx;
		position: relative;
		font-size: 20rpx;
	}

	.tab-icon {
		width: 100%;
		height: 100%;
		margin-bottom: 4rpx;
		position: relative;
		z-index: 0;
	}

	.tab-icon.notice {
		background: url('@/static/images/icon/messages-notice-icon.png') no-repeat center/cover;
		margin-bottom: 10rpx;
		background-size: 100% 100%;
	}

	.tab-icon.consult {
		background: url('@/static/images/icon/messages-consult-icon.png') no-repeat center/cover;
		background-size: 100% 100%;
	}

	.tab-title {
		position: absolute;
		top: 130rpx;
		z-index: 1;
		font-size: 32rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.tab-title.notice {
		color: #003176;
	}

	.tab-title.consult {
		color: #4D3478;
	}

	.tab-no {
		position: absolute;
		z-index: 1;
		top: 30rpx;
		margin-left: calc(65%);
		font-size: 24rpx;
		background: #D30101;
		color: #fff;
		border-radius: 24rpx;
		padding: 0 12rpx;
		border: 2rpx solid #fff;
		font-size: 22rpx;
	}

	.img-shuazi {

		width: 20px;
		height: 20px;
		background-color: rgb(235, 235, 235);
		padding: 2px;
		border-radius: 10px 10px 10px 10px;
	}


	.fraction {
		background-color: white;
		border-radius: 32rpx;
		box-shadow: 0 5px 15px 1rpx #e0e2e7;
		margin-bottom: 20px;
		padding: 18rpx 16rpx;

		.yaoqing {
			color: rgb(18, 247, 228);
			margin-right: 10px;
		}
	}
</style>